<template>
    <view class="content">
        <view class="u-p-b-20">
            <u-search bg-color="#fff" :show-action="false" v-model="keyword" shape="round" placeholder="请输入名称" @search="doSearch"></u-search>
        </view>
        <view class="item" v-for="(item, index) in list" :key="index" @click="choose(item)">
            <image :src="item.checked ? '../../static/icon/choose.png' : '../../static/icon/cancel.png'" class="choose"></image>
            <view class="u-flex-1">{{item.question}}</view>
            <image src="../../static/icon/create.png" class="create-icon" @click.stop="$gTo('/staff/pages/create/question-details?id='+ item.id)"></image>
        </view>
        <view style="height: 94rpx;padding-top: 30rpx;">
            <u-loadmore :status="status" v-if="status != 'loadmore'" />
        </view>
        <!-- <view style="text-align: center;padding: 50upx 0;color: #999;font-size: 24rpx;" v-if="list.length == 0">暂无相关信息</view> -->
        
        <view class="footer">
            <view class="f-t" v-if="list && list.length > 0">
                <view class="u-flex" @click="selectAll()">
                    <image :src="checkAll == true ? '../../static/icon/choose.png' : '../../static/icon/cancel.png'" class="choose"></image>
                    <view>全选</view>
                </view>
                <view class="u-flex">
                    <view @click="del">删除</view>
                    <view class="tj-btn" @click="add">添加到试卷</view>
                </view>
            </view>
            <view class="tjkt-btn" @click="$gTo('/staff/pages/create/add-question')">添加考题</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                status: 'loadmore', //是否显示没有更多了
                page: 1,
                list: [],
                keyword: '',
                checkAll: false, //全选
                sellectList: '',
                from: '',
            };
        },
        onLoad(option) {
            if (option.from) {
                this.from = option.from
            }
        },
        onShow() {
            this.page = 1
            this.list = []
            this.status = 'loadmore'
            this.getList()
        },
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
        methods: {
            add() {
                var ids = [], list = [];
                this.list.forEach((el) => {
                    if (el.checked) {
                        list.push(el)
                    }
                })
                if (list.length == 0) {
                    this.$toast('请选择考题');
                    return false;
                }
                if (this.from) {
                    uni.$emit('CHOOSE_QUESTION', list)
                    this.$backT()
                } else {
                    this.$gTo('/staff/pages/create/create-activity?list=' + JSON.stringify(list))
                }
            },
            //单选
            choose(item) {
                this.sellectList = [];
                item.checked = !item.checked;
                this.list.forEach((el, index) => {
                    if (el.checked) {
                        this.sellectList.push(el)
                    }
                })
                if (this.sellectList.length == this.list.length) {
                    this.checkAll = true
                } else {
                    this.checkAll = false
                }
            },
            
            //全选
            selectAll() {
                this.checkAll = !this.checkAll;
                if (this.checkAll) {
                    this.list.forEach((item, index) => {
                        item.checked = true
                    })
                } else {
                    this.list.forEach((item, index) => {
                        item.checked = false
                    })
                }
            },
            del() {
                var ids = [];
                this.list.forEach((el) => {
                    if (el.checked) {
                        ids.push(el.id)
                    }
                })
                if (ids.length == 0) {
                    this.$toast('请选择考题');
                    return false;
                }
                uni.showModal({
                	title: '提示',
                	content: '确定删除考题？',
                	success: (res) => {
                		if (res.confirm) {
                			this.$ajax('delete_question_bank', {
                			    user_token: this.$getSync('userToken'),
                			    ids: ids.join(','),//考题id，分割字符串
                			}).then(ret => {
                			    if (ret.success == 1000) {
                			        this.$toast('删除成功');
                			        setTimeout(() => {
                			        	this.getList();
                			            this.checkAll = false
                			        }, 500)
                			    } else {
                			        this.$toast(ret.msg);
                			    }
                			});
                		}
                	}
                })
            },
            doSearch() {
                this.page = 1
                this.list = []
                this.status = 'loadmore'
                this.getList()
            },
            
            getList() {
            	if (this.status == 'nomore') return;
            	this.status = 'loading';
            	this.$ajax('question_bank', {
            		user_token: this.$getSync('userToken'),
            		page: this.page,
            		limit: 10,
                    name: this.keyword,//搜索
            	}).then(ret => {
            		if (ret.success == 1000) {
            			if (ret.detail && ret.detail.question_bank && ret.detail.question_bank.length > 0) {
            				this.list = this.list.concat(ret.detail.question_bank);
            				this.page++;
            				this.status = 'loadmore'
            			} else {
            				this.status = 'nomore'
            			}
                        if (this.list && this.list.length > 0) {
                            this.list.forEach(cur => {
                                this.$set(cur, 'checked', false)
                            })
                        }
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    
    
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding: 20rpx 20rpx 240rpx;
    }
    .item{
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        padding: 30rpx 35rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .choose{
        width: 31rpx;
        height: 31rpx;
        margin-right: 25rpx;
    }
    .create-icon{
        width: 31rpx;
        height: 31rpx;
        margin-left: 15rpx;
    }
    
    
    .footer{
        width: 100vw;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 9;
    }
    .f-t{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14rpx 20rpx;
    }
    .tj-btn{
        padding: 20rpx 25rpx;
        font-size: 28rpx;
        line-height: 1;
        color: #803906;
        background-color: #ffecd2;
        border-radius: 50rpx;
        margin-left: 35rpx;
    }
    .tjkt-btn{
        font-size: 36rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #00a1e9;
    }
    
</style>
